<template>
  <h2>基本信息</h2>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="form"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <!-- 按钮 新增 -->
    <el-form-item>
      <el-button type="danger" @click="sheepWeighedAdd(ruleFormRef)">
        新增
      </el-button>
    </el-form-item>

    <!-- 日期框 测定日期 -->
    <el-form-item label="测定日期：" prop="appearancesDate">
      <el-col :span="11">
        <el-date-picker
          v-model="form.appearancesDate"
          type="date"
          placeholder="请选择测定日期"
          style="width: 100%"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </el-col>
    </el-form-item>
     <!-- 下拉框 羊只耳号 breedingSheepArchiveId -->
     <el-form-item label="羊只耳号：">
      <el-select v-model="form.breedingSheepArchiveId" placeholder="请选择羊只耳号">
        <el-option v-for="item in breedingList" :label="item.auricle" :value="item.breedingSheepArchiveId" />
      </el-select>
    </el-form-item>
      <!-- 下拉框 牙齿咬合 -->
      <el-form-item label="牙齿咬合：" >
      <el-select v-model="form.teeth" placeholder="请选择牙齿咬合">
        <el-option label="正常" value="1" />
        <el-option label="错齿" value="2" />
      </el-select>
    </el-form-item>
    <!-- 文本框 毛发 -->
    <el-form-item label="毛发：">
      <el-input v-model="form.appearancesHair" />
    </el-form-item>
     <!-- 文本框 色斑 -->
     <el-form-item label="色斑：">
      <el-input v-model="form.appearancesPigmentation" />
    </el-form-item>
     <!-- 文本框 蹄颜色 -->
     <el-form-item label="蹄颜色：">
      <el-input v-model="form.appearancesHoofColor" />
    </el-form-item>
     <!-- 文本框 嘴颜色 -->
     <el-form-item label="嘴颜色：">
      <el-input v-model="form.appearancesMouthColor" />
    </el-form-item>
       <!-- 下拉框 角 -->
       <el-form-item label="角：" >
      <el-select v-model="form.horns" placeholder="请选择角">
        <el-option label="有角" value="1" />
        <el-option label="无角" value="2" />
      </el-select>
    </el-form-item>
      <!-- 下拉框 脂肪分布 -->
      <el-form-item label="脂肪分布：" >
      <el-select v-model="form.distribution" placeholder="请选择脂肪分布">
        <el-option label="1分" value="1" />
        <el-option label="2分" value="2" />
        <el-option label="3分" value="3" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { ElMessage } from 'element-plus';
//生命周期 钩子函数
onMounted(() => {
  postBreedingList(); //羊只耳号
});

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const form = reactive({
  appearancesDate:'2024-11-19T13:54:15.264Z',
  breedingSheepArchiveId:'',
  teeth:'',
  appearancesHair:'',
  appearancesPigmentation:'',
  appearancesHoofColor:'',
  appearancesMouthColor:'',
  horns:'',
  distribution:'',
});

//验证
const rules = reactive({
  appearancesDate: [{ required: true, message: "请选择测定日期", trigger: "blur" }],
  breedingSheepArchiveId: [
    { required: true, message: "请选择羊只耳号", trigger: "change" },
  ],
});

//品相测定-新增
const sheepWeighedAdd = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");

      //发送网络请求
      axios.post('http://localhost:5012/api/Breedings/AppearancesAdds',{
        appearancesDate:form.appearancesDate,
        breedingSheepArchiveId:form.breedingSheepArchiveId,
        teeth:form.teeth,
        appearancesHair:form.appearancesHair,
        appearancesPigmentation:form.appearancesPigmentation,
        appearancesHoofColor:form.appearancesHoofColor,
        appearancesMouthColor:form.appearancesMouthColor,
        horns:form.horns,
        distribution:form.distribution,
      }).then(res=>{
        console.log(res);
        if(res.data.code==0){
          ElMessage.success('品相测定信息新增成功!');
          router.push('AppearancesList');
        }
        else{
          ElMessage.error('品相测定信息新增失败!');
          return;
        }
      }).catch(err=>{
        console.log(err);
      })

    } else {
      console.log("error submit!", fields);
    }
  });
};

//羊只耳号
const breedingList=ref([]);
const postBreedingList=()=>{
  console.log(form);
 axios.post('http://localhost:5012/api/SheepFile/BasicInformationList',{}).then(res=>{
  console.log(res);
  breedingList.value=res.data.data;
 })
 .catch(err=>{
  console.log(err);
 })
}
</script>
